<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta charset="UTF-8">
    <title>Client Side Pagination in DataGrid - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="themes/icon.css">
    <link rel="stylesheet" type="text/css" href="demo.css">
    
    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
    
    <script type="text/javascript" src="jquery.easyui.min.js"></script>
    
    <script type="text/javascript" src="js/amq_jquery_adapter.js"></script>
    <script type="text/javascript" src="js/amq.js"></script>
    <script type="text/javascript" src="yanue.pop.js"></script>
    
    <script type="text/javascript">
    var amq = org.activemq.Amq;
    amq.init({ 
      uri: 'amq', 
      logging: true,
      timeout: 20
    });
    var myHandler =
    {
      rcvMessage: function(message)
      {
          new Pop("你有新消息",
                  "http://www.yanue.info/js/pop/pop.html",message.text);

      }
    };
    function init(){
    	amq.addListener("megaeyes","topic://FirstTopic",myHandler.rcvMessage); 
    }

    
    
    

    </script>
</head>
<body onload="init()">
    <div style="margin:10px 0;"></div>
    
    <table id="dg" title="设备列表" style="width:700px;height:300px" data-options="
                rownumbers:true,
                singleSelect:true,
                autoRowHeight:false,
                pagination:true,
                pageSize:10,
                toolbar:toolbar">
        <thead>
            <tr>
                <th field="inv" width="80">Inv No</th>
                <th field="date" width="100">Date</th>
                <th field="name" width="80">Name</th>
                <th field="amount" width="80" align="right">Amount</th>
                <th field="price" width="80" align="right">Price</th>
                <th field="cost" width="100" align="right">Cost</th>
                <th field="note" width="110">Note</th>
            </tr>
        </thead>
    </table>
    <script>
    
    var toolbar = [{
        text:'添加',
        iconCls:'icon-add',
        handler:function(){alert('add')}
    },{
        text:'修改',
        iconCls:'icon-cut',
        handler:function(){alert('cut')}
    },'-',{
        text:'删除',
        iconCls:'icon-save',
        handler:function(){alert('save')}
    }];
    
    
    
        function getData(){
            var rows = [];
            for(var i=1; i<=800; i++){
                var amount = Math.floor(Math.random()*1000);
                var price = Math.floor(Math.random()*1000);
                rows.push({
                    inv: 'Inv No '+i,
                    date: $.fn.datebox.defaults.formatter(new Date()),
                    name: 'Name '+i,
                    amount: amount,
                    price: price,
                    cost: amount*price,
                    note: 'Note '+i
                });
            }
            return rows;
        }
        
        function pagerFilter(data){
            if (typeof data.length == 'number' && typeof data.splice == 'function'){    // is array
                data = {
                    total: data.length,
                    rows: data
                }
            }
            var dg = $(this);
            var opts = dg.datagrid('options');
            var pager = dg.datagrid('getPager');
            pager.pagination({
                onSelectPage:function(pageNum, pageSize){
                    opts.pageNumber = pageNum;
                    opts.pageSize = pageSize;
                    pager.pagination('refresh',{
                        pageNumber:pageNum,
                        pageSize:pageSize
                    });
                    dg.datagrid('loadData',data);
                }
            });
            if (!data.originalRows){
                data.originalRows = (data.rows);
            }
            var start = (opts.pageNumber-1)*parseInt(opts.pageSize);
            var end = start + parseInt(opts.pageSize);
            data.rows = (data.originalRows.slice(start, end));
            return data;
        }
        
        $(function(){
            $('#dg').datagrid({loadFilter:pagerFilter}).datagrid('loadData', getData());
        });
    </script>
    
    
    
    
    
    
    <div id="pop" style="display:none;">
    <style type="text/css">
    *{margin:0;padding:0;}
    #pop{background:#fff;width:260px;border:1px solid #e0e0e0;font-size:12px;position: fixed;right:10px;bottom:10px;}
    #popHead{line-height:32px;background:#f6f0f3;border-bottom:1px solid #e0e0e0;position:relative;font-size:12px;padding:0 0 0 10px;}
    #popHead h2{font-size:14px;color:#666;line-height:32px;height:32px;}
    #popHead #popClose{position:absolute;right:10px;top:1px;}
    #popHead a#popClose:hover{color:#f00;cursor:pointer;}
    #popContent{padding:5px 10px;}
    #popTitle a{line-height:24px;font-size:14px;font-family:'微软雅黑';color:#333;font-weight:bold;text-decoration:none;}
    #popTitle a:hover{color:#f60;}
    #popIntro{text-indent:24px;line-height:160%;margin:5px 0;color:#666;}
    #popMore{text-align:right;border-top:1px dotted #ccc;line-height:24px;margin:8px 0 0 0;}
    #popMore a{color:#f60;}
    #popMore a:hover{color:#f00;}
    </style>
    <div id="popHead">
    <a id="popClose" title="关闭">关闭</a>
    <h2>温馨提示</h2>
    </div>
    <div id="popContent">
    <dl>
        <dt id="popTitle"><a href="http://yanue.info/" target="_blank">这里是参数</a></dt>
        <dd id="popIntro">这里是内容简介</dd>
    </dl>
    <p id="popMore"><a href="http://yanue.info/" target="_blank">查看 »</a></p>
    </div>
</div>
</body>
</html>